<template>
    <el-container>
        <el-header>
            <el-steps :active="3" align-center>
                <el-step title="确认订单" ></el-step>
                <el-step title="提交订单" ></el-step>
                <el-step title="交易完成" ></el-step>
            </el-steps>
        </el-header>
        <el-main>
            <br />
            <br />
            <el-alert
                    title=""
                    type="success"
                    description=""
                    show-icon>
                <h2>交易成功</h2>
            </el-alert>
        </el-main>
        <el-container>
            <el-header class="address-card">
                <orderAddress :order-info="userOrderList" :out_id="out_trade_no" :trade_no="trade_no"></orderAddress>
            </el-header>
            <el-main class="table-card">
                <tbody>
                <tr>
                    <th class="goods-img">宝贝图片</th>
                    <th class="goods-name">宝贝名称</th>
                    <th class="goods-price">单价</th>
                    <th class="goods-count">数量</th>
                    <th class="total-price">付款</th>
                    <th class="order-state">品牌</th>
                    <th class="order-remark">备注</th>
                </tr>
                </tbody>
                <tbody v-if="arrayOrder">
                <tr v-for="orderlist in arrayOrder">
                    <td class="goods-img">
                        <img :src='startUrl+orderlist.goods.goodsPicturepaths[0].gpPicpath' alt="加载中...">
                    </td>
                    <td class="goods-name">
                        {{orderlist.goods.goodsname}}
                    </td>
                    <td class="goods-price">
                        {{Math.round(orderlist.goods.goodsprice*orderlist.goods.goodsdiscount / 10)}}
                    </td>
                    <td class="goods-count">
                        {{orderlist.oCount}}
                    </td>
                    <td class="total-price">
                        ￥{{orderlist.goods.goodsprice*orderlist.goods.goodsdiscount / 10 * orderlist.oCount}}
                    </td>
                    <td class="order-state">
                        {{orderlist.goods.goodsbrand}}
                    </td>
                    <td class="order-active">
                        {{orderlist.goods.firstCategory.fcName}}
                    </td>
                </tr>
                </tbody>
            </el-main>
        </el-container>
        <foot></foot>
    </el-container>



</template>
<style scoped>
    .address-card{
        margin-bottom: 50px;
    }
    .el-header{
        text-align: left;
        width: 80vw;
        margin-left: 6.5vw;
    }
    .el-container{
        margin-top: 30px;
        margin-left: 3vw;
    }

    .foot{
        margin-left: -3vw;
        padding: 0;
    }
    .el-alert{
        position: center;
        font-size: 40px;
        width: 60vw;
        margin-left: 17vw;
    }
    .table-card{
        margin-bottom: 20px;
        margin-left: 6.5vw;
    }
    /deep/.el-tabs__header{
        width: 71.5vw;
    }
    /deep/.el-tabs__nav>div{
        font-size: 16px;
        font-weight: 800;
    }
    .el-tabs{
        margin-left: 13.5vw;
    }
    img{
        height: 60px;
        width: 50px;
        display: inline-block;
    }
    td{
        text-align:center;
        width: 10vw;
        border: 1px solid silver;
        padding: 10px 0;
        background-color: rgb(245,245,245);
    }
    th{
        background-color: #272727;
        border-bottom: none;
        color: #dfdfdf;
        padding: 10px 0;
    }

</style>
<script>
    export default {
        data() {
            return {
                startUrl:this.$store.state.beginUrl,
                goods_img: require("../frontstage/cardImg/1.jpg"),
                goods_name: '【风雅司制】静华大袖衫交领襦裙绣花传统水墨渐变',
                goods_price:'233.00',
                goods_count:'1',
                total_price:'233.00',
                order_state:'待发货',
                /*订单数据*/
                userOrderList:null,
                arrayOrder:null,
                out_trade_no:'',
                trade_no:'',

            };
        },
        beforeCreate() {
            console.log('支付完');
        },
        created() {
            console.log('支付完毕界面');
            this.getOrderListId();
            this.updateData();

        },
        mounted() {
            this.updateData();
        },
        methods: {
            next() {
                if (this.active++ > 2) this.active = 0;
            },
            getOrderListId(){
                let out_trade_no = this.$route.query.out_trade_no;
                let trade_no = this.$route.query.trade_no;
                let orderId = out_trade_no.slice(0,2);
                this.out_trade_no = out_trade_no;
                this.trade_no = trade_no;
                /*现更改状态为已付款*/
                this.$axios.get("/userorderlist/queryById/"+orderId).then(result=>{
                    this.userOrderList = result.data;
                    console.log(this.userOrderList);
                    console.log('用户传递');
                    this.$store.commit('sendUserInfos',result.data.user);
                    this.$store.commit('controlUserLogin',true);
                    window.sessionStorage.setItem("user",JSON.stringify(result.data.user));
                    let updateData={
                        'uoOrderid':orderId,
                        'uoOrderstatus':'1',
                    };
                    /*更改状态为付款*/
                    this.$axios.post("/userorderlist/update",updateData).then(result=>{
                        // console.log(result.data);
                        if (result.data){
                            // this.$message.success("更新成功");
                            console.log("更新成功");
                            /*存储数据*/

                        }
                    })
                });
                /*商品*/
                this.$axios.get("/orderlist/queryByOrderId/"+orderId).then(result=>{
                    /*商品id*/
                    // console.log(result);
                    this.arrayOrder = result.data;
                    // console.log(this.arrayOrder);
                });
            },
            updateData(){
                var val = 1;
                window.setInterval(()=>{
                    console.log("用户"+val++);
                    setTimeout(this.reloadPage,0);
                },1000);
            },
            reloadPage(){
                window.location.reload;
            }
        },
        computed:{
            getOrderData(){
                this.getOrderListId();
            }
        }

    }
</script>